<template>
  <div style="padding: 0 50px">
    <Header class="header-cont main__title--top">预警编辑</Header>

    <div class="col">
      <label>功能模块</label>
      <Input v-model="data.module"
             class="input-1"
             :disabled='true' />
    </div>
    <div class="col">
      <label>功能点</label>
      <Input v-model="data.point"
             class="input-1"
             :disabled='true' />
    </div>
    <div class="col">
      <label class="star">待办提醒时间</label>
      <div v-if="data.todoTimeRule == 'work_before'">
        开工前<Input v-model="data.todoTimeValue"
               class="input-2"
               maxlength='10' />天
      </div>

      <Input v-if="data.todoTimeRule == 'event'"
             v-model="data.todoTimeValue"
             class="input-1"
             :disabled='true' />
    </div>
    <div class="col">
      <label class="star">逾期时间</label>
      <div v-show="data.overdueTimeRule == 'work_before'">
        开工前<Input v-model="data.overdueTimeValue"
               class="input-2"
               maxlength='10' />天
      </div>
      <div v-show="data.overdueTimeRule == 'after_submit'">
        提交后<Input v-model="data.overdueTimeValue"
               class="input-2"
               maxlength='10' />天
      </div>
      <div v-show="data.overdueTimeRule == 'after_approval'">
        审核后<Input v-model="data.overdueTimeValue"
               class="input-2"
               maxlength='10' />天
      </div>
      <div v-show="data.overdueTimeRule == 'after_issue'">
        签发后<Input v-model="data.overdueTimeValue"
               class="input-2"
               maxlength='10' />天
      </div>
      <div v-show="data.overdueTimeRule == 'after_reject'">
        驳回后<Input v-model="data.overdueTimeValue"
               class="input-2"
               maxlength='10' />天
      </div>
      <div v-show="data.overdueTimeRule == 'after_begin'">
        开始后<Input v-model="data.overdueTimeValue"
               class="input-2"
               maxlength='10' />天
      </div>
      <Input v-show="data.overdueTimeRule == 'event'"
             v-model="data.overdueTimeValue"
             class="input-1"
             :disabled='true' />
      <div v-show="data.overdueTimeRule == 'risk_level'">
        <div class="margin10"><span class="level-span"> I级风险驳回后</span>
          <Input v-model="data.level1"
                 class="input-2"
                 maxlength='10' />
          天 </div>

        <div class="margin10"><span class="level-span">II级风险驳回后</span>
          <Input v-model="data.level2"
                 class="input-2"
                 maxlength='10' />
          天 </div>
        <div class="margin10"><span class="level-span">III级风险驳回后</span>
          <Input v-model="data.level3"
                 class="input-2"
                 maxlength='10' />
          天 </div>
        <div class="margin10"><span class="level-span">IV级风险驳回后</span>
          <Input v-model="data.level4"
                 class="input-2"
                 maxlength='10' />
          天 </div>
      </div>
      <div class="col">
        <label class="star">紧急程度</label>
        <div class="margin10">
          蓝牌 <Input value="0"
                 disabled
                 class="input-2"
                 maxlength='3' />%<span class="per-span">————————</span><Input v-model="data.level1Value"
                 class="input-2"
                 maxlength='3' />%
        </div>
        <div class="margin10">
          黄牌 <Input v-model="data.level1Value"
                 class="input-2"
                 maxlength='3' />%<span class="per-span">————————</span><Input v-model="data.level2Value"
                 class="input-2"
                 maxlength='3' />%
        </div>
        <div class="margin10">
          橙牌 <Input v-model="data.level2Value"
                 class="input-2"
                 maxlength='3' />%<span class="per-span">————————</span><Input v-model="data.level3Value"
                 class="input-2"
                 maxlength='3' />%
        </div>
        <div class="margin10">
          红牌 <Input v-model="data.level3Value"
                 class="input-2"
                 maxlength='3' />%<span class="per-span">————————</span><Input value="100"
                 disabled
                 class="input-2"
                 maxlength='3' />%
        </div>
      </div>
      <div class="foot-modal">
        <Row>
          <Col span="2"
               offset="8">
          <Button type="primary"
                  @click="save">保存</Button>
          </Col>
          <Col span="2">
          <Button @click='closeTab'>取消</Button>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { parse } from 'path'
export default {
  name: 'early-warning-edit',
  data() {
    return {
      typeList: [],
      proList: [],
      data: {}, //详情数据保存
      isDisabled: false
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    closeTab() {
      this.closeTag({
        name: 'early-warning-edit',
        params: this.$route.params
      })
    },
    save() {
      if (this.data.overdueTimeRule == 'risk_level') {
        //风险驳回天
        if (
          this.data.level1 &&
          this.$regex.number1(this.data.level1) &&
          (this.data.level2 && this.$regex.number1(this.data.level2)) &&
          (this.data.level3 && this.$regex.number1(this.data.level3)) &&
          (this.data.level4 && this.$regex.number1(this.data.level4))
        ) {
          this.data.overdueTimeValue =
            this.data.level1 +
            ',' +
            this.data.level2 +
            ',' +
            this.data.level3 +
            ',' +
            this.data.level4
        } else {
          this.$Message.warning('逾期时间为大于零的正整数')
          return false
        }
      }
      if (!this.data.todoTimeValue) {
        this.$Message.warning('请填写待办提醒时间')
      } else if (
        !this.$regex.number1(this.data.todoTimeValue) &&
        this.data.todoTimeRule != 'event'
      ) {
        this.$Message.warning('待办提醒时间为大于零的正整数')
      } else if (!this.data.overdueTimeValue) {
        this.$Message.warning('请填写逾期提醒时间')
      } else if (
        !this.$regex.number1(this.data.overdueTimeValue) &&
        this.data.overdueTimeRule != 'event' &&
        this.data.overdueTimeRule != 'risk_level'
      ) {
        this.$Message.warning('待办提醒时间为大于零的正整数')
      } else if (
        !this.data.level1Value ||
        !this.$regex.number1(this.data.level1Value) ||
        this.data.level1Value >= 100
      ) {
        this.$Message.warning('请正确填写风险等级1的值')
      } else if (
        !this.data.level2Value ||
        !this.$regex.number1(this.data.level2Value) ||
        this.data.level2Value >= 100
      ) {
        this.$Message.warning('请正确填写风险等级2的值')
      } else if (
        !this.data.level3Value ||
        !this.$regex.number1(this.data.level3Value) ||
        this.data.level3Value >= 100
      ) {
        this.$Message.warning('请正确填写风险等级3的值')
      } else if (this.data.level1Value > this.data.level2Value) {
        this.$Message.warning('风险等级1的值不得大于风险等级2的值')
      } else if (this.data.level1Value > this.data.level3Value) {
        this.$Message.warning('风险等级1的值不得大于风险等级3的值')
      } else if (this.data.level2Value > this.data.level3Value) {
        this.$Message.warning('风险等级2的值不得大于风险等级3的值')
      } else {
        let params = {
          id: this.data.id,
          todoTimeValue: this.data.todoTimeValue,
          overdueTimeValue: this.data.overdueTimeValue,
          level1Value: this.data.level1Value,
          level2Value: this.data.level2Value,
          level3Value: this.data.level3Value,
          level4Value: this.data.level4Value
        }
        this.$api.earlyWarning.edit(params).then(res => {
          if (res.code == 200) {
            this.$Message.success(res.message)
            this.closeTab()
            this.$router.push({
              name: 'early-warning'
            })
          } else {
            this.$Message.warning(res.message)
          }
        })
      }
    }
  },
  mounted() {
    this.data = this.$route.params.item //将主页的数据赋值
    if (this.data.overdueTimeRule == 'risk_level') {
      let levelArr = this.data.overdueTimeValue.split(',')
      this.data.level1 = levelArr[0]
      this.data.level2 = levelArr[1]
      this.data.level3 = levelArr[2]
      this.data.level4 = levelArr[3]
    }
  }
}
</script>

<style scoped lang="scss">
.col {
  padding: 5px;
  .col-item {
    display: inline-block;
    margin-right: 10px;
  }
  label {
    display: block;
  }
  .input-1 {
    width: 300px;
  }
  .input-2 {
    width: 150px;
  }
}
.asterisk:before {
  content: '*';
}
.header-modal {
  padding: 30px 10px;
  font-size: 16px;
  font-weight: bold;
}
.foot-modal {
  height: 100px;
  width: 100%;
  text-align: center;
  position: fix;
  bottom: 20px;
  margin-top: 50px;
}
.star:before {
  content: '*';
  display: inline-block;
  margin-right: 4px;
  line-height: 1;
  font-family: SimSun;
  font-size: 14px;
  color: #ed4014;
}
.margin10 {
  margin-top: 10px;
}
.level-span {
  width: 100px;
  display: inline-block;
}
.per-span {
  margin-left: 20px;
  margin-right: 20px;
}
</style>
